<template>
  <el-dialog
    title="签到设置"
    class="gl_dialog_TitleLine gl_dl_footer"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :before-close="close"
    width="500px"
  >
    <el-form ref="refForm" class="gl_form_mini" :model="vo" :rules="rules" size="small" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="15">
          <el-form-item label="开课前" prop="beforeLesson">
            <el-input-number v-model="vo.beforeLesson" style="width: 100%" :controls="false" :min="0" :max="10000" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="" label-width="0" prop="beforeLessonTimeTypeCode">
            <el-select v-model="vo.beforeLessonTimeTypeCode" placeholder="请选择时间类型">
              <el-option
                v-for="item in dict.checkInSettingTimeType"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="15">
          <el-form-item label="开课后" prop="afterLesson">
            <el-input-number v-model="vo.afterLesson" style="width: 100%" :controls="false" :min="0" :max="10000" />
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label="" label-width="0" prop="afterLessonTimeTypeCode">
            <el-select v-model="vo.afterLessonTimeTypeCode" placeholder="请选择时间类型">
              <el-option
                v-for="item in dict.checkInSettingTimeType"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="close">取消</el-button>
      <el-button type="primary" :loading="submitLoading" size="mini" @click="submit()">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { mapState, mapActions } from 'vuex';

import {
  CreateCheckInSettingInput_Rules
} from '@/lib/validate/hall/index.js';

import { CopyData } from '@/lib';
export default {
  props: {
    info: {
      type: Object,
      default () {
        return {};
      }
    }
  },
  data () {
    return {
      dialogVisible: false,
      rules: new CreateCheckInSettingInput_Rules(),
      vo: {
        beforeLesson: 0,
        afterLesson: 0,
        beforeLessonTimeTypeCode: '',
        afterLessonTimeTypeCode: ''
      },
      submitLoading: false
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  created() {
    this.getDict();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    open () {
      this.dialogVisible = true;
      CopyData(this.info, this.vo);
    },
    close () {
      this.vo = {
        beforeLesson: 0,
        afterLesson: 0,
        beforeLessonTimeTypeCode: '',
        afterLessonTimeTypeCode: ''
      };
      this.$nextTick(() => {
        this.$refs.refForm.clearValidate();
        this.submitLoading = false;
        this.dialogVisible = false;
      });
    },
    cancelLoading () {
      this.submitLoading = false;
    },
    submit () {
      this.$refs.refForm.validate(valid => {
        if (valid) {
          this.submitLoading = true;
          this.$emit('onSubmit', this.vo);
        }
      });
    }
  }
};
</script>
